<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view class="container">
		<!-- <u-navbar title="详情" :autoBack="true" :fixed="true" :bgColor="'#ffffff'" :placeholder="true" :titleStyle="{
			color: '#333',
			fontSize: '16px',
		}"></u-navbar> -->
		<view class="media_box">
			<view class="video" v-if="currentTab === 0">
				<video id="myVideo" :src="detailInfo.video"></video>
			</view>
			<view class="swiper-box" v-else>
				<swiper class="swiper" :indicator-dots="false">
					<swiper-item :key="i" v-for="(item, i) in detailInfo.images">
						<image :src="item" mode="heightFix" @click="previewImage(item)"
							style="display: block; margin: 0 auto"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="media_change">
				<view class="media_change_item" :class="{ active: currentTab === 0 }" @click="changeMedia(0)">
					视频
				</view>
				<view class="media_change_item" :class="{ active: currentTab === 1 }" @click="changeMedia(1)">
					图片
				</view>
			</view>
		</view>

		<view class="content">
			<!-- 价格标题区 -->
			<view class="price-section">
				<view class="price">
					<text class="symbol">¥</text>
					<text class="number">{{ detailInfo.rent }}</text>
					<text class="unit">/月</text>
				</view>
				<view class="title">{{ detailInfo.name }}</view>
				<view class="review">
					<view>浏览量&nbsp;{{ detailInfo.visit_num }}</view>
					<view style="display: flex; align-items: center" @click="toRate">
						我要评价
						<u-icon name="arrow-right" size="12" color="#999"></u-icon>
					</view>
				</view>
			</view>

			<!-- 房源信息 -->
			<view class="info-section">
				<view class="section-title">房源信息</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="label">类型</text>
						<text class="value">{{ detailInfo.type_text }}</text>
					</view>
					<view class="info-item">
						<text class="label">户型</text>
						<text class="value">{{ detailInfo.house_type_text || '未知' }}</text>
					</view>
					<view class="info-item">
						<text class="label">楼层</text>
						<text class="value">{{ detailInfo.floor }}楼</text>
					</view>
					<view class="info-item">
						<text class="label">面积</text>
						<text class="value">{{ detailInfo.area }}m²</text>
					</view>
					<!-- 	<view class="info-item">
						<text class="label">朝向</text>
						<text class="value">
							{{detailInfo.face?formatDataList(detailInfo.face,faceTypeList[0]):'未知'}}</text>
					</view>
					<view class="info-item">
						<text class="label">装修</text>
						<text class="value">
							{{detailInfo.decoration?formatDataList(detailInfo.decoration,decorationTypeList[0]):'未知'}}</text>
					</view> -->
					<view class="info-item">
						<text class="label">付款</text>
						<text class="value">
							{{detailInfo.payment_type?formatDataList(detailInfo.payment_type,paymentTypeList[0]):'未知'}}</text>
					</view>
				</view>
			</view>
			<view class="share-box">
				<button class="share-item" open-type="share" hover-class='none'>
					<u-icon name="share" color="#ffffff" size="28"></u-icon>
					<!--          <text>分享</text>-->
				</button>
			</view>
			<!-- 费用详情 -->
			<!--			<view class="cost-section">-->
			<!--				<view class="section-title">水电费用</view>-->
			<!--				<view class="cost-list">-->
			<!--					<view class="cost-item" v-for="(item, index) in detailInfo.board">-->
			<!--						<text class="value">¥{{ item.price }}{{meterUnitFormat(item.type)}}</text>-->
			<!--						<text class="label">{{item.name}}</text>-->
			<!--					</view>-->
			<!--				</view>-->
			<!--			</view>-->
			<view class="cost-section">
				<view class="section-title">其他费用</view>
				<view class="cost-list">
					<view class="cost-item" v-for="(item, index) in detailInfo.fixed">
						<text class="value">¥{{ item.price }}</text>
						<text class="label">{{item.type_name}}</text>
					</view>
				</view>
			</view>
			<!-- 房源设施 -->
			<view class="facility-section">
				<view class="section-title">房源设施</view>
				<view class="facility-grid">
					<view :key="index" :class="item.select?'facility-item':'facility-item opacity'"
						v-for="(item, index) in facilityList">
						<image :src="item.icon" mode="" style="width: 64rpx; height: 64rpx"></image>
						<text>{{ item.option_name }}</text>
					</view>
				</view>
			</view>
			<!-- 位置及周边 -->
			<view class="location-section">
				<view class="section-header">
					<text class="section-title">位置及周边</text>
					<text class="more" @click="openMyLocation">查看地图 ></text>
				</view>
				<view class="address">
					<image :src="location" style="width: 32rpx; max-height: 30rpx"></image>
					<text>{{ detailInfo.address }}</text>
				</view>
				<view class="map_box">
					<!-- <map id="myMap" class="map-image" scale="12" :longitude="longitude" :latitude="latitude"
						:markers="markers[mapCurrent]" ></map> -->
					<map id="myMap" class="map-image" scale="12" :latitude="latitude" :longitude="longitude"
						:circles="circles" @markertap="markertap"></map>
					<!-- show-location="true" -->
					<!-- <image class="map-image" :src='map_url' mode="aspectFill"></image> -->
					<view class="map_select" v-if="showNear">
						<view class="select_item" :class="{ active: mapCurrent == index }" :key="index"
							v-for="(item, index) in map_select" @click="mapSelectChange(item, index)">
							{{ item.name }}
							<view class="line" v-show="index < 4"></view>
						</view>
					</view>
				</view>
				<view class="poi-list" v-if="showNear">
					<view class="poi-item">
						<!-- <view class="name">地铁站</view> -->
						<view class="poi-item-content">
							<view class="poi-item-info" v-for="(item, index) in markers[mapCurrent]" :key="index">
								<text class="station">{{ item.title }}</text>
								<text class="distance">{{ item.distance }}米</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 房源简介 -->
			<view class="notice-section" v-if="detailInfo.intro">
				<view class="section-title">房源简介</view>
				<view class="notice-content">{{ detailInfo.intro }}</view>
			</view>
			<!-- 入住须知 -->
			<view class="notice-section" v-if="detailInfo.notice">
				<view class="section-title">入住须知</view>
				<view class="notice-content">{{ detailInfo.notice }}</view>
			</view>

			<!-- 房源评价 -->
			<view class="review-section">
				<view class="section-title">房源评价</view>
				<view class="empty-review" v-if="commentsList.length == 0">
					<image :src="empty_review" mode="aspectFit"></image>
					<text>还没有评论，快来评论</text>
				</view>
				<view class="comments-list">
					<view class="comments-item" v-for="(comments, i) in commentsList" :key="i">
						<view class="top">
							<view class="left">
								<view class="ava">
									<image :src="comments.user.avatar" mode=""></image>
								</view>
								<view class="name">{{ comments.user.username }}</view>
							</view>
							<view class="right">
								<view class="time">{{ comments.create_time_text }}</view>
							</view>
						</view>
						<view class="content">{{ comments.content }}</view>
						<view class="stars">
							<view class="rate-item">
								<view class="label">安全</view>
								<view class="rate">
									<uni-rate color="#bbb" active-color="#1CA9FE" :value="parseInt(comments.safe)"
										readonly="true" />
								</view>
							</view>
							<view class="rate-item">
								<view class="label">卫生</view>
								<view class="rate">
									<uni-rate color="#bbb" active-color="#1CA9FE" :value="parseInt(comments.health)"
										readonly="true" />
								</view>
							</view>
							<view class="rate-item">
								<view class="label">服务</view>
								<view class="rate">
									<uni-rate color="#bbb" active-color="#1CA9FE" :value="parseInt(comments.service)"
										readonly="true" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<button class="review-btn" @click="toRate">去评论</button>
			</view>

			<!-- 相似房源 -->
			<view class="similar-section">
				<view class="section-title">附近房源</view>
				<scroll-view class="similar-list" scroll-x>
					<view class="similar-item" v-for="(item, index) in similarHouses" :key="index"
						@click="toDetail(item.id)">
						<image :src="item.images[0]" mode="aspectFill"></image>
						<view class="similar-info">
							<view class="title">{{ item.name }}</view>
							<view class="tags">
								<text v-for="(tag, tagIndex) in item.tags_text" :key="tagIndex">
									{{ tag }}
								</text>
							</view>
							<view class="price">
								<text class="symbol">¥</text>
								<text class="number">{{ item.rent }}</text>
								<text class="unit">/月</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 底部按钮 -->
			<view class="bottom-bar">
				<view class="icon-btn" @click="handleCollect">
					<!-- <image :src='icon18' mode=""></image> -->
					<uni-icons type="star" size="20" v-if="detailInfo.is_collect != 1"></uni-icons>
					<uni-icons type="star-filled" size="20" v-if="detailInfo.is_collect == 1"
						color="#0095F8"></uni-icons>
					<text>收藏</text>
				</view>
				<view class="icon-btn" @click="buildRent()">
					<image :src="icon19" mode=""></image>
					<text>整栋待租</text>
				</view>
				<button class="contact-btn phone" @click="makePhoneCall(detailInfo.kf_mobile)">
					电话咨询
				</button>
				<!-- open-type="contact" -->
				<button class="contact-btn chat"
					@click="$Tips('/pages/chat/chat?user_id='+detailInfo.building.user_id+'&name='+detailInfo.title)">在线沟通</button>
			</view>
		</view>
		<uni-popup ref="popupBuild" style="overflow: hidden" type="bottom" borderRadius="42rpx 42rpx 0 0"
			@change="change">
			<view class="build-box">
				<view class="top">
					<view class="price-area">
						<text class="symbol">￥</text>
						<text class="amount">{{ rentArea }}</text>
						<text class="unit">/月</text>
					</view>
					<view class="address">
						{{ detailInfo.address }}
					</view>
				</view>
				<view class="content">
					<view class="filter-header">
						<view class="left">
							<view class="all">全部</view>
							<text class="line"></text>
						</view>
						<view class="right">
							<view class="tab" :class="{ active: activeTab === 'floor' }"
								@click="handleTabChange('floor')">
								楼层
							</view>
							<view class="tab" :class="{ active: activeTab === 'price' }"
								@click="handleTabChange('price')">
								价格
							</view>
						</view>
					</view>
					<view class="filter-content">
						<view class="filter-item-floor" v-if="activeTab === 'floor'">
							<view class="floor-list">
								<view :key="item" class="floor-item" v-for="item in floorList"
									:class="{ active: currentFloor === item.name }" @click="selectFloor(item)">
									{{ item.name }}
								</view>
							</view>
							<view class="house-list">
								<view @click="toDetail(item.id)" class="house-item" :key="item.id"
									v-for="item in filteredRentBuild">
									<image class="house-image" :src="item.images[0]" mode="aspectFill"></image>
									<view class="house-info">
										<view class="room-name">{{ item.name }}房</view>
										<view class="house-attrs">
											<text>{{ item.floor }}楼</text>
											<text>{{ item.area }}m²</text>
											<text>{{ item.house_type_text }}</text>
										</view>
										<view class="house-tags">
											<text class="tag" v-for="(tag, index) in item.tags_text" :key="index">
												{{ tag }}
											</text>
										</view>
										<view class="price">
											<text class="symbol">¥</text>
											<text class="amount">{{ item.rent }}</text>
											<text class="unit">/月</text>
										</view>
									</view>
									<view class="arrow">
										<u-icon name="arrow-right" color="#333" size="16"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="filter-item-price" v-if="activeTab === 'price'">
							<view class="house-list">
								<view @click="toDetail(item.id)" class="house-item" :key="item.id"
									v-for="item in priceRentBuild">
									<image class="house-image" :src="item.images[0]" mode="aspectFill"></image>
									<view class="house-info">
										<view class="room-name">{{ item.name }}房</view>
										<view class="house-attrs">
											<text>{{ item.floor }}楼</text>
											<text>{{ item.area }}m²</text>
											<text>{{ item.house_type_text }}</text>
										</view>
										<view class="house-tags">
											<text class="tag" v-for="(tag, index) in item.tags_text" :key="index">
												{{ tag }}
											</text>
										</view>
										<view class="price">
											<text class="symbol">¥</text>
											<text class="amount">{{ item.rent }}</text>
											<text class="unit">/月</text>
										</view>
									</view>
									<view class="arrow">
										<u-icon name="arrow-right" color="#333" size="16"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getNearHouses,
		getHouseDetail,
		getComments,
		addCollect,
		buildForRent,
	} from "@/api/houseresources.js";
	import {
		Toast
	} from "@/utils/utils.js";
	import {
		getOptionList,
	} from '@/api/landlord'
	import amap from "@/utils/amap-wx.js";
	export default {
		data() {
			return {
				show: false,
				longitude: null, // 默认中心点经度
				latitude: null, // 默认中心点纬度
				markers: [
					[],
					[],
					[],
					[],
					[]
				],
				poisList: [],
				circles: [],
				showNear: false,
				searchRadius: 2000, // 2公里（单位：米）
				currentTab: 0,
				imgUrl: this.$Config.HTTP_REQUEST_URL + "/img/index-product.jpg",
				location: this.$Config.HTTP_REQUEST_URL + "/img/location.png",
				map_url: this.$Config.HTTP_REQUEST_URL + "/img/map.jpg",
				empty_review: this.$Config.HTTP_REQUEST_URL + "/img/empty-review.png",
				icon18: this.$Config.HTTP_REQUEST_URL + "/img/icon18.png",
				icon19: this.$Config.HTTP_REQUEST_URL + "/img/icon19.png",
				mapCurrent: 0,
				map_select: [{
						name: "交通出行",
						type: "地铁站|公交站",
					},
					{
						name: "商城购物",
						type: "商城|超市",
					},
					{
						name: "休闲娱乐",
						type: "公园|电影院|运动",
					},
					{
						name: "教育医疗",
						type: "医院|学校",
					},
					{
						name: "应急消防",
						type: "消防机关",
					},
				],
				mapType: [],
				house_id: null,
				detailInfo: {},
				similarHouses: [],
				facilities: [],
				commentsList: [],
				_mapContext: null,
				rentBuild: [],
				rentArea: "",
				currentFloor: "",
				floorList: [],
				activeTab: "floor",
				filteredRentBuild: [],
				priceRentBuild: [],
				faceTypeList: [
					[{
							name: "东",
							type: "东",
						},
						{
							name: "南",
							type: "南",
						},
						{
							name: "西",
							type: "西",
						},
						{
							name: "北",
							type: "北",
						},
						{
							name: "东西",
							type: "东西",
						},
						{
							name: "南北",
							type: "南北",
						},
						{
							name: "东南",
							type: "东南",
						},
						{
							name: "西南",
							type: "西南",
						},
						{
							name: "东北",
							type: "东北",
						},
						{
							name: "西北",
							type: "西北",
						},
					]
				],
				paymentTypeList: [
					[{
							name: "押一付一",
							type: "押一付一",
						},
						{
							name: "押一付二",
							type: "押一付二",
						}, {
							name: "押一付三",
							type: "押一付三",
						}, {
							name: "押二付一",
							type: "押二付一",
						}, {
							name: "押二付二",
							type: "押二付二",
						}, {
							name: "押二付三",
							type: "押二付三",
						}, {
							name: "押三付一",
							type: "押三付一",
						}, {
							name: "押零付一",
							type: "押零付一",
						}
					]
				],
				decorationTypeList: [
					[{
							name: "精装修",
							type: 1,
						},
						{
							name: "普通装修",
							type: 2,
						},
					]
				],
				facilityList: []
			};
		},
		onLoad(e) {
			this.house_id = e.id;
		},
		onShareAppMessage(e) {
			return {
				title: this.detailInfo.name,
				imageUrl: this.detailInfo.images[0],
			};
		},
		onShow(e) {
			this.getDetail(this.house_id);
			this.getNearList(this.house_id);
			this.getCommentsList(this.house_id);
			this.getRentBuild(this.house_id);
		},
		methods: {

			meterUnitFormat(type) {
				switch (type) {
					case 1:
						return '/吨';
					case 2:
						return '/度';
					case 3:
						return '/立方米';
					case 4:
						return '/升';
					default:
						return '';
				}
			},
			formatDataList(data, list) {
				if (!data || !list || !Array.isArray(list)) {
					return '';
				}
				const item = list.find(item => item.type == data);
				return item ? item.name : '';
			},
			change(e) {
				this.show = e.show;
			},
			previewImage(item) {
				uni.previewImage({
					current: item, // 当前显示图片的http链接
					urls: this.detailInfo.images, // 需要预览的图片http链接列表
				});
			},
			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //仅为示例
				});
			},
			openMyLocation() {
				uni.openLocation({
					longitude: this.longitude,
					latitude: this.latitude,
					name: this.detailInfo.address,
				});
			},
			markertap(e) {
				for (var i = 0; i < this.poisList.length; i++) {
					if (this.poisList[i].id == e.markerId) {
						uni.openLocation({
							longitude: this.poisList[i].longitude,
							latitude: this.poisList[i].latitude,
							name: this.poisList[i].title,
						});
					}
				}
			},
			// 设置中心点（示例使用默认坐标，可改为用户选择）
			setCenterLocation() {
				console.log(this.detailInfo)
				this.longitude = Number(this.detailInfo.lng);
				this.latitude = Number(this.detailInfo.lat);
				// this.amapPlugin = new amap.AMapWX({
				// 	key: '57d200d053c41cd7d884e6b8aecae6c1'
				// });
				this._mapContext = uni.createMapContext("myMap", this);
				// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
				this._mapContext.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 60,
					complete(res) {
						console.log("initMarkerCluster", res);
					},
				});
				// 初始化圆形区域
				this.circles = [{
					longitude: this.longitude,
					latitude: this.latitude,
					radius: this.searchRadius,
					color: "#FF0000",
					fillColor: "#00aaff80",
				}, ];
				let markData = {
					id: this.generateNumericUUID(),
					longitude: this.longitude,
					latitude: this.latitude,
					title: this.detailInfo.address,
					callout: {
						content: this.detailInfo.address,
						display: "ALWAYS",
						color: "#ffffff",
						fontSize: 16,
						bgColor: "#ee8945",
						padding: 5,
						textAlign: "center",
						borderRadius: 3,
					},
					// iconPath: this.$Config.HTTP_REQUEST_URL +
					// 	"/img/location.png",
					width: 25,
					height: 30,
				};
				this.poisList.push(markData);
				this._mapContext.addMarkers({
					markers: [markData],
					clear: false,
					complete(res) {
						console.log("addMarkers", res);
					},
				});
				this.searchPOI({
						name: "交通出行",
						type: "地铁站|公交站",
					},
					0
				);
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: (res) => {
				// 		console.log(res)
				// 		that.longitude = res.longitude;
				// 		that.latitude = res.latitude;
				// 		that.initMap();
				// 	}
				// });
			},
			// 查询POI
			searchPOI(item, index) {
				let that = this;
				if (!this.mapType.includes(item.type)) {
					this.mapType.push(item.type);
				} else {
					return false;
				}
				try {
					let backGround = "";
					if (item.name == "交通出行") {
						backGround = "#3ab4f3";
					} else if (item.name == "商城购物") {
						backGround = "#ee8945";
					} else if (item.name == "休闲娱乐") {
						backGround = "#ae4fea";
					} else if (item.name == "教育医疗") {
						backGround = "#25c27b";
					} else if (item.name == "应急消防") {
						backGround = "#ff5500";
					}
					uni
						.request({
							url: "https://restapi.amap.com/v3/place/around",
							method: "GET",
							data: {
								key: "ae4e2a948fd1623549c31cacd894e64c",
								location: `${this.longitude},${this.latitude}`,
								radius: this.searchRadius,
								city_limit: true,
								types: item.type, // 按需修改POI类型
								page_size: "6",
							},
						})
						.then((res) => {
							if (res[1].data.pois) {
								this.showNear = true;
								let markData = res[1].data.pois.map((poi, index) => ({
									id: that.generateNumericUUID(),
									longitude: Number(poi.location.split(",")[0]),
									latitude: Number(poi.location.split(",")[1]),
									title: poi.name,
									distance: poi.distance,
									// alpha: 0,
									callout: {
										content: poi.name,
										display: "ALWAYS",
										color: "#ffffff",
										fontSize: 12,
										bgColor: backGround,
										padding: 5,
										textAlign: "center",
										borderRadius: 3,
									},
									// iconPath: that.$Config.HTTP_REQUEST_URL +
									// 	"/img/location.png",
									// iconPath: "",
									width: 25,
									height: 30,
								}));
								console.log(markData, 88888);
								markData.forEach((item) => {
									that.poisList.push(item);
								});
								console.log(that.poisList, 9999);
								that.markers[index] = markData;
								that._mapContext.addMarkers({
									markers: markData,
									clear: false,
									complete(res) {
										that.$forceUpdate();
										console.log("addMarkers", res);
									},
								});
							} else {
								this.showNear = false;
							}
						});
				} catch (error) {
					console.error("POI查询失败:", error);
				}
			},
			generateNumericUUID(length = 16) {
				const chars = "0123456789";
				let result = "";

				for (let i = 0; i < length; i++) {
					result += chars.charAt(Math.floor(Math.random() * chars.length));
				}

				return Number(result);
			},
			changeMedia(index) {
				this.currentTab = index;
			},
			mapSelectChange(item, index) {
				this.mapCurrent = index;
				this.searchPOI(item, index);
			},
			toRate() {
				uni.navigateTo({
					url: "/pages-house/rate/rate?house_id=" + this.detailInfo.id,
				});
			},
			getDetail(id) {
				getHouseDetail({
					id: id,
				}).then((res) => {
					this.detailInfo = res.data.data;
					this.setCenterLocation();
					this.getOptionList()
				});
			},
			getOptionList() {
				getOptionList({
					cid: 4
				}).then(res => {
					this.facilityList = res.data.data.map(facility => {
						return {
							...facility,
							select: this.detailInfo.pt.some(item => item.option_id === facility.option_id)
						};
					})
				});
			},
			getNearList(id) {
				getNearHouses({
					house_id: id,
				}).then((res) => {
					this.similarHouses = res.data.data;
				});
			},
			getCommentsList(id) {
				getComments({
					page: 1,
					house_id: id,
				}).then((res) => {
					console.log(res.data.data.data);
					this.commentsList = res.data.data.data;
				});
			},
			handleCollect() {
				addCollect({
					house_id: this.house_id,
				}).then((res) => {
					if (res.response.data.code == 1) {
						Toast(res.response.data.msg);
						this.getDetail(this.house_id);
					}
				});
			},
			toDetail(id) {
				uni.navigateTo({
					url: `/pages-house/house-detail/house-detail?id=${id}`,
				});
			},
			getRentBuild(id) {
				buildForRent({
					id: id,
					page: 1,
					page_size: 999,
				}).then((res) => {
					console.log(res);
					this.filteredRentBuild = this.rentBuild = res.data.data.data;
					this.priceRentBuild = res.data.data.data.sort((a, b) => {
						// 将 rent 转换为数字进行比较
						const rentA = parseFloat(a.rent);
						const rentB = parseFloat(b.rent);
						// 处理可能的非数字情况
						if (isNaN(rentA)) return 1; // 将非数字值排到后面
						if (isNaN(rentB)) return -1;
						// 从小到大排序
						return rentA - rentB;
					});
					// 先映射数据
					this.floorList = this.rentBuild.map((item) => ({
						name: `${item.floor}F`,
						value: item.floor,
					}));

					// 使用 reduce 进行去重
					this.floorList = this.floorList.reduce((unique, current) => {
						// 检查是否已存在相同 value 的项
						const exists = unique.find((item) => item.value === current.value);
						if (!exists) {
							unique.push(current);
						}
						return unique;
					}, []);

					// 按楼层数字大小排序
					this.floorList.sort((a, b) => parseInt(a.value) - parseInt(b.value));

					this.calculateRentRange(this.rentBuild);
				});
			},
			buildRent() {
				this.$refs.popupBuild.open();
			},
			// 切换标签方法
			handleTabChange(tab) {
				this.activeTab = tab;
				console.log(tab);
			},
			selectFloor(floor) {
				this.currentFloor = floor.name;
				this.filteredRentBuild = this.rentBuild.filter((item) => {
					// 确保 floor 字段存在且可以转换为数字
					const itemFloor = parseInt(item.floor);
					const targetFloor = parseInt(floor.value);
					return !isNaN(itemFloor) && itemFloor === targetFloor;
				});
			},
			calculateRentRange(data) {
				let maxRent = 0;
				let minRent = Infinity;

				data.forEach((item) => {
					const rent = parseFloat(item.rent);
					if (!isNaN(rent)) {
						maxRent = Math.max(maxRent, rent);
						minRent = Math.min(minRent, rent);
					}
				});
				if (maxRent === minRent) {
					// 如果相等，最大值加1，确保有一个范围区间
					minRent = 1;
				}
				this.rentArea = minRent + "~" + maxRent;
			},
		},
	};
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background: #f5f6fa;
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
	}

	.media_box {
		width: 100%;
		height: 496rpx;
		position: relative;

		.video {
			width: 100%;
			height: 100%;

			#myVideo {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-box {
			position: relative;
			width: 100%;
			height: 100%;

			.swiper {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.image-count {
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
				padding: 4rpx 16rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 100rpx;
				color: #fff;
				font-size: 24rpx;
			}
		}

		.media_change {
			left: 50%;
			bottom: 32rpx;
			transform: translateX(-50%);
			width: 192rpx;
			height: 50rpx;
			position: absolute;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 26rpx;

			.media_change_item {
				width: 96rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				color: #fff;
				font-size: 24rpx;
				border-radius: 26rpx;
				position: absolute;
				top: 0;

				&:nth-child(1) {
					left: 0;
				}

				&:nth-child(2) {
					right: 0;
				}

				&.active {
					background: #0095f8;
				}
			}
		}
	}

	.content {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.price-section {
		padding: 24rpx 0;
		background: #fff;

		.price {
			margin-bottom: 16rpx;

			.symbol {
				font-size: 28rpx;
				color: #ff5a5f;
			}

			.number {
				font-size: 40rpx;
				color: #ff5a5f;
				font-weight: 500;
			}

			.unit {
				font-size: 24rpx;
				color: #999;
			}
		}

		.title {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 16rpx;
		}

		.review {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #999;
		}
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 24rpx;
	}

	.info-section {
		padding: 24rpx 0;
		background: #fff;

		.info-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 24rpx;

			.info-item {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.label {
					font-size: 28rpx;
					color: #999;
					margin-right: 10rpx;
				}

				.value {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}

	.share-box {
		position: fixed;
		right: 24rpx;
		bottom: 200rpx;
		z-index: 1000;

		button {
			margin: unset;
			padding: unset;
			background-color: #ffffff;
		}

		button::after {
			border: none;
		}

		.share-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 10rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: #2979ff;
			margin-bottom: 16rpx;

			text {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}

	.cost-section {
		margin-top: 24rpx;
		padding: 24rpx 0;
		background: #fff;

		.cost-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.cost-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-top: 20rpx;
				}

				.value {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #0095f8;
				}
			}
		}
	}

	.facility-section {
		padding: 24rpx 0;
		background: #fff;

		.facility-grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 24rpx;

			.facility-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #666;
					margin-top: 12rpx;
				}
			}

			.opacity {
				opacity: 0.3;
			}

		}
	}

	.location-section {
		margin-top: 24rpx;
		padding: 24rpx 0;
		background: #fff;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.more {
				font-size: 26rpx;
				color: #2979ff;
			}
		}

		.address {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			text {
				flex: 1;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				margin-left: 12rpx;
			}
		}

		.map_box {
			position: relative;
			height: 400rpx;
			width: 100%;
			margin-bottom: 32rpx;

			.map-image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
				margin-bottom: 24rpx;
			}

			.map_select {
				left: 50%;
				bottom: 24rpx;
				transform: translateX(-50%);
				width: 600rpx;
				height: 48rpx;
				position: absolute;
				background: #ffffff;
				border-radius: 26rpx;
				padding: 14rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;

				.select_item {
					height: 100%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 300;
					font-size: 22rpx;
					color: #333333;
					display: flex;
					justify-content: space-between;
					align-items: center;

					view.line {
						margin: 0 10rpx;
						width: 2rpx;
						height: 100%;
						background-color: #d1d2d4;
					}

					&.active {
						color: #0095f8;
					}
				}
			}
		}

		.poi-list {
			.poi-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.name {
					font-size: 28rpx;
					color: #333;
					width: 180rpx;
				}

				.poi-item-content {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.poi-item-info {
						display: flex;
						justify-content: space-between;
					}
				}

				.station {
					flex: 1;
					font-size: 28rpx;
					color: #666;
				}

				.distance {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}

	.notice-section {
		margin-top: 24rpx;
		padding: 24rpx 0;
		background: #fff;

		.notice-content {
			font-size: 28rpx;
			color: #666;
		}
	}

	.review-section {
		width: 100%;
		margin-top: 24rpx;
		padding: 24rpx 0;
		background: #fff;

		.empty-review {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 48rpx 0;

			image {
				width: 328rpx;
				height: 208rpx;
				margin-bottom: 24rpx;
			}

			text {
				font-size: 28rpx;
				color: #999;
				margin-bottom: 24rpx;
			}
		}

		.review-btn {
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #2979ff;
			color: #fff;
			font-size: 28rpx;
			border-radius: 36rpx;
		}
	}

	.similar-section {
		margin-top: 24rpx;
		padding: 24rpx 0;
		background: #fff;

		.similar-list {
			height: 440rpx;

			.similar-item {
				display: block;
				float: left;
				width: 300rpx;
				height: 440rpx;
				margin-right: 24rpx;

				&:last-child {
					margin-right: 0;
				}

				image {
					width: 100%;
					height: 200rpx;
					border-radius: 12rpx;
				}

				.similar-info {
					box-sizing: border-box;
					width: 100%;
					height: 240rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 16rpx 0;

					.title {
						width: 100%;
						height: 60rpx;
						line-height: 30rpx;
						font-size: 28rpx;
						color: #333;
						white-space: normal;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					.tags {
						min-height: 32rpx;

						text {
							display: inline-block;
							padding: 4rpx 12rpx;
							background: #f7f8fa;
							color: #666;
							font-size: 22rpx;
							border-radius: 4rpx;
							margin-right: 8rpx;
						}
					}

					.price {
						.symbol {
							font-size: 24rpx;
							color: #ff5a5f;
						}

						.number {
							font-size: 32rpx;
							color: #ff5a5f;
							font-weight: 500;
						}

						.unit {
							font-size: 22rpx;
							color: #999;
						}
					}
				}
			}
		}
	}

	.comments-list {
		padding-left: 20rpx;

		.comments-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.top {
				width: 100%;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					height: 64rpx;
					display: flex;
					align-items: center;
					color: #333;

					.ava {
						width: 64rpx;
						height: 64rpx;
						border-radius: 32rpx;
						background-color: #000;
						margin-right: 20rpx;
						overflow: hidden;

						image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
				}

				.right {
					color: #666;
					font-size: 14px;
				}
			}

			.content {
				box-sizing: border-box;
				padding: 20rpx 0;
				font-size: 14px;
				color: #333;
				padding-left: 84rpx;
			}

			.stars {
				display: flex;
				padding-left: 84rpx;
				flex-direction: column;

				.rate-item {
					display: flex;
					justify-content: space-between;
					font-size: 14px;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 24rpx 24rpx calc(env(safe-area-inset-bottom));
		box-sizing: border-box;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.icon-btn {
			display: flex;
			flex-direction: column;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
			align-items: center;
			margin: 0 12rpx;

			image {
				width: 16px;
				height: 15px;
				margin: 5px 0;
			}
		}

		.contact-btn {
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-size: 28rpx;
			border-radius: 36rpx;
			margin: 0 12rpx;

			&.phone {
				background: #fff;
				color: #2979ff;
				border: 2rpx solid #2979ff;
			}

			&.chat {
				background: #2979ff;
				color: #fff;
			}
		}
	}

	.build-box {
		border-radius: 42rpx 42rpx 0 0;
		height: 1048rpx;
		background-color: #ffffff;
		padding: 32rpx;
		box-sizing: border-box;

		.top {
			height: 156rpx;
			box-sizing: border-box;
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #eeeeee;

			.price-area {
				margin-bottom: 16rpx;

				.symbol {
					font-size: 26rpx;
					color: #ff5a5f;
				}

				.amount {
					font-size: 40rpx;
					font-weight: bold;
					color: #ff5a5f;
				}

				.unit {
					font-size: 26rpx;
					color: #ff5a5f;
				}
			}

			.address {
				font-size: 30rpx;
				color: #222;
				font-weight: 500;
				line-height: 1.4;
				margin-top: 30rpx;
			}
		}

		.content {
			height: calc(100% - 156rpx);
			padding: 0;
			border-radius: 0;
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;

			.filter-header {
				height: 52rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.left {
					height: 52rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.all {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						text-align: center;
						font-style: normal;
					}

					.line {
						width: 32rpx;
						height: 6rpx;
						background: linear-gradient(#0079ff 0%, #1ca9fe 100%);
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 149, 248, 0.3);
						border-radius: 4rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;
					width: 160rpx;
					height: 52rpx;
					border-radius: 48rpx;
					box-sizing: border-box;
					border: 2rpx solid #d8dce5;
					overflow: hidden;

					.tab {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 22rpx;
						color: #0a1629;
						line-height: 32rpx;
						text-align: center;
						font-style: normal;
						flex: 1;

						&.active {
							width: 76rpx;
							height: 48rpx;
							line-height: 48rpx;
							color: #ffffff;
							background: #0095f8;
							border-radius: 40rpx;
						}
					}
				}
			}

			.filter-content {
				height: calc(100% - 76rpx);

				.filter-item-floor {
					height: 100%;
					display: flex;
					justify-content: space-between;

					.floor-list {
						width: 88rpx;
						height: 292rpx;
						background: #f5f6fa;
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
						border-radius: 24rpx;
						box-sizing: border-box;
						padding: 12rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						flex-direction: column;

						.floor-item {
							width: 64rpx;
							height: 64rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #606060;
							line-height: 64rpx;
							text-align: center;
							font-style: normal;
							border-radius: 16rpx;

							&.active {
								background: #0095f8;
								color: #ffffff;
							}
						}
					}

					.house-list {
						width: 578rpx;
						height: 100%;
						overflow-y: auto;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;

						.house-item {
							width: 100%;
							height: 216rpx;
							background: #f5f6fa;
							box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
							border-radius: 24rpx;
							margin-bottom: 24rpx;
							box-sizing: border-box;
							padding: 24rpx;
							box-sizing: border-box;
							display: flex;
							position: relative;

							&:last-child {
								margin-bottom: 0;
							}

							.house-image {
								width: 168rpx;
								height: 168rpx;
								border-radius: 16rpx;
								margin-right: 24rpx;
							}

							.house-info {
								width: 300rpx;
								height: 168rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.room-name {
									font-family: PingFangSC, PingFang SC;
									font-weight: 500;
									font-size: 26rpx;
									color: #222222;
									text-align: left;
									font-style: normal;
									width: 300rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.house-attrs {
									font-size: 22rpx;
									color: #999;

									text {
										margin-right: 16rpx;

										&:last-child {
											margin-right: 0;
										}
									}
								}

								.house-tags {
									.tag {
										width: auto;
										height: 26rpx;
										display: inline-block;
										padding: 4rpx 12rpx;
										background: #f5f6fa;
										border-radius: 4rpx;
										font-size: 20rpx;
										color: #666;
										margin-right: 12rpx;

										&:first-child {
											color: #ff5a5f;
											background: #fff5f6;
										}
									}
								}

								.price {
									.symbol {
										font-size: 20rpx;
										color: #ff5a5f;
									}

									.amount {
										font-size: 30rpx;
										color: #ff5a5f;
										font-weight: bold;
									}

									.unit {
										font-size: 20rpx;
										color: #ff5a5f;
									}
								}
							}

							.arrow {
								position: absolute;
								right: 24rpx;
								top: 24rpx;
							}
						}
					}
				}

				.filter-item-price {
					height: 100%;

					.house-list {
						width: 100%;
						height: 100%;
						overflow-y: auto;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;

						.house-item {
							width: 100%;
							height: 216rpx;
							background: #f5f6fa;
							box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
							border-radius: 24rpx;
							margin-bottom: 24rpx;
							box-sizing: border-box;
							padding: 24rpx;
							box-sizing: border-box;
							display: flex;
							position: relative;

							&:last-child {
								margin-bottom: 0;
							}

							.house-image {
								width: 168rpx;
								height: 168rpx;
								border-radius: 16rpx;
								margin-right: 24rpx;
							}

							.house-info {
								width: calc(100% - 230rpx);
								height: 168rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.room-name {
									font-family: PingFangSC, PingFang SC;
									font-weight: 500;
									font-size: 26rpx;
									color: #222222;
									text-align: left;
									font-style: normal;
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.house-attrs {
									font-size: 22rpx;
									color: #999;

									text {
										margin-right: 16rpx;

										&:last-child {
											margin-right: 0;
										}
									}
								}

								.house-tags {
									.tag {
										width: auto;
										height: 26rpx;
										display: inline-block;
										padding: 4rpx 12rpx;
										background: #f5f6fa;
										border-radius: 4rpx;
										font-size: 20rpx;
										color: #666;
										margin-right: 12rpx;

										&:first-child {
											color: #ff5a5f;
											background: #fff5f6;
										}
									}
								}

								.price {
									.symbol {
										font-size: 20rpx;
										color: #ff5a5f;
									}

									.amount {
										font-size: 30rpx;
										color: #ff5a5f;
										font-weight: bold;
									}

									.unit {
										font-size: 20rpx;
										color: #ff5a5f;
									}
								}
							}

							.arrow {
								position: absolute;
								right: 24rpx;
								top: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>